<template>
  <div class="maps-container">
    <div id="main" style="width:100%; height:100%"></div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.drawxjfxzts();
    // console.log(myChart.getModel().getComponent("xAxis").axis.scale._extent);
  },
  methods: {
    drawxjfxzts() {
      let myChart = echarts.init(document.getElementById("main"));
      let yearArr = ["今日", "昨日", "本月", "上月"];
      var jdData = [
        ["红河", "玉溪", "曲靖", "丽江", "昆明"],
        ["红河", "玉溪", "曲靖", "丽江", "昆明"],
        ["红河", "玉溪", "曲靖", "丽江", "昆明"],
        ["红河", "玉溪", "曲靖", "丽江", "昆明"]
      ];
      var datas = [
        [13, 111, 13.6, 984, 638],
        [15, 31, 168, 101, 915],
        [14, 131, 113, 873, 494],
        [143, 131, 213, 1073, 944]
      ];

      let option = {
        baseOption: {
          timeline: {
            data: yearArr,
            axisType: "category",
            autoPlay: true,
            playInterval: 5000,
            left: "10%",
            right: "10%",
            bottom: "0%",
            width: "80%",
            lineStyle: {
              color: "#fff"
            },

            itemStyle: {
              color: "#00C8FF"
            },

            label: {
              color: "#fff"
            },
            symbolSize: 10,
            lineStyle: {
              color: "#fff"
            },
            checkpointStyle: {
              borderColor: "#fff",
              borderWidth: 2
            },
            controlStyle: {
              color: "#fff",
              borderColor: "#fff"
            }
          },
          title: {
            text: "",
            right: "2%",
            bottom: "8%",
            textStyle: {
              fontSize: 50,
              color: "#fff"
            }
          },
          tooltip: {
            trigger: "axis"
          },
          calculable: true,
          grid: {
            left: "8%",
            right: "2%",
            bottom: "6%",
            top: "0%",
            containLabel: true
          },
          label: {
            normal: {
              textStyle: {
                color: "#fff"
              }
            }
          },
          yAxis: [
            {
              offset: "37",
              type: "category",
              data: "",
              
              nameTextStyle: {
                color: "#fff"
              },
              axisLabel: {
                //rotate:45,
                textStyle: {
                  fontSize: 12,
                  color: "#fff"
                },
                interval: 0
              },

              axisLine: {
                show: false,
                lineStyle: {
                  color: "#fff"
                }
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: "#333"
                }
              }
            },
          ],
          xAxis: [
            {
              type: "value",
              name: "",
              show:false,
              splitNumber: 8,
              nameTextStyle: {
                color: "#333"
              },
              axisLine: {
                show: false /* 坐标轴 */,
                lineStyle: {
                  color: "#fff"
                }
              },

              axisLabel: {
                formatter: "{value} "
              },
              splitLine: {
                show: false /* 网格线 */,
                lineStyle: {
                  color: "#ccc"
                }
              }
            }
          ],
          series: [
            {
              name: "",
              type: "bar",
              barMaxWidth: "30",
              markLine: {
                label: {
                  normal: {
                    show: true
                  }
                },
                lineStyle: {
                  normal: {
                    color: "red",
                    width: 3
                  }
                }
              },
              barWidth: "50%",
              label: {
                normal: {
                  show: true /* 坐标轴上显示数字 */,
                  position: "right", /* 数字显示的位置  inside 中间  */
                  formatter: "{c}"
                }
              },
              itemStyle: {
                normal: {
                  barBorderRadius: 30,
                  color: function(params) {
                    // build a color map as your need.
                    var colorList = [
                      "#9966cc",
                      "#eee8ab",
                      "#a35015",
                      "#04dd98",
                      "#315dbc"
                    ];
                    return colorList[params.dataIndex];
                  }
                }
              }
            }
          ],
          animationDurationUpdate: 2000,
          animationEasingUpdate: "quinticInOut"
        },
        options: []
      };
      for (var n = 0; n < yearArr.length; n++) {
        var res = [];
        //alert(jdData.length);
        for (var j = 0; j < datas[n].length; j++) {
          res.push({
            name: jdData[n][j],
            value: datas[n][j]
          });
        }

        res
          .sort(function(a, b) {
            return b.value - a.value;
          })
          .slice(0, 6);

        res.sort(function(a, b) {
          return a.value - b.value;
        });
        var res1 = [];
        var res2 = [];
        //console.log(res);
        for (var t = 0; t < res.length; t++) {
          res1[t] = res[t].name;
          res2[t] = res[t].value;
        }

        option.options.push({
          title: {
            text: yearArr[n]
          },
          yAxis: {
            data: res1
          },
          series: [
            {
              data: res2
            }
          ]
        });
      }

      if (option && typeof option === "object") {
        myChart.setOption(option, true);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.maps-container {
  width: 100%;
  height: 100%;
  background: #000c40;
  //   position: relative;
}
</style>
